<template>
    <div class="boxs-page">
        <PageHeader 
            title="业务领域" 
            subtitle="易凡科技专业解决方案"
            :breadcrumbItems="[{ text: '首页', path: '/' }]"
            currentText="业务领域"
        />
        
        <!-- 降级数据提示 -->
        <el-alert
            v-if="isFallback"
            :title="errorMessage"
            type="info"
            :closable="false"
            center
            show-icon
            style="margin-bottom: 20px;"
        />
        
        <!-- 业务领域横幅 -->
        <div class="boxs-banner" :style="{ backgroundImage: `url(${require('@/assets/images/banner/陌上菜园网站img2.jpg')})` }">
            <div class="overlay"></div>
            <div class="banner-content">
                <h2>专业解决方案，助力企业发展</h2>
                <p>易凡科技为您提供全方位的技术服务与解决方案</p>
                
                <!-- 搜索框 -->
                <div class="search-container">
                    <el-popover placement="bottom" title="搜索结果" width="100%" :visible="visible" popper-class="search-popover">
                        <template #reference>
                            <el-input 
                                v-model="searchText" 
                                class="search-input" 
                                placeholder="搜索业务领域关键词" 
                                :prefix-icon="Search"
                                clearable
                                @input="visible = true" 
                                @blur="() => setTimeout(() => visible = false, 200)" 
                            />
                        </template>
                        
                        <div class="search-results">
                            <div v-if="searchnewslist.length">
                                <div 
                                    v-for="data in searchnewslist" 
                                    :key="data._id" 
                                    class="search-item" 
                                    @click="handleChangepage(data._id)"
                                >
                                    <div class="item-title">{{ data.title }}</div>
                                    <div class="item-meta">{{ whichTime(data.editTime) }}</div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty description="暂无相关业务" :image-size="80" />
                            </div>
                        </div>
                    </el-popover>
                </div>
            </div>
        </div>
        
        <div class="page-container">
            <!-- 热门业务 -->
            <section class="featured-section">
                <div class="section-header">
                    <h2 class="section-title">热门业务</h2>
                    <p class="section-desc">我们的核心业务领域</p>
                </div>
                
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="12" :md="6" v-for="item in topNewsList" :key="item._id">
                        <div class="featured-card" @click="handleChangepage(item._id)">
                            <div class="card-image" :style="{ backgroundImage: `url(${item.cover ? 'http://localhost:3000' + item.cover : require('@/assets/images/product/麻辣口水鸡.jpg')})` }">
                                <div class="card-category">{{ getCategoryName(item.category) }}</div>
                            </div>
                            <div class="card-content">
                                <h3 class="card-title">{{ item.title }}</h3>
                                <div class="card-meta">
                                    <time class="time">
                                        <i class="el-icon-time"></i> {{ whichTime(item.editTime) }}
                                    </time>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </section>
            
            <!-- 业务分类 -->
            <section class="categories-section">
                <div class="section-header">
                    <h2 class="section-title">业务分类</h2>
                    <p class="section-desc">根据您的需求选择合适的解决方案</p>
                </div>
                
                <el-tabs v-model="whichTab" class="category-tabs">
                    <el-tab-pane 
                        v-for="item in tablist" 
                        :key="item.name" 
                        :label="item.label" 
                        :name="item.name"
                    >
                        <el-row :gutter="30">
                            <!-- 左侧内容列表 -->
                            <el-col :xs="24" :md="18" class="category-list">
                                <div 
                                    v-for="data in tabnews[item.name]" 
                                    :key="data._id" 
                                    class="category-item"
                                    @click="handleChangepage(data._id)"
                                >
                                    <div class="item-image" :style="{ backgroundImage: `url(${data.cover ? 'http://localhost:3000' + data.cover : require('@/assets/images/product/红烧排骨.jpg')})` }"></div>
                                    <div class="item-content">
                                        <h3 class="item-title">{{ data.title }}</h3>
                                        <p class="item-summary">{{ getSummary(data.content) }}</p>
                                        <div class="item-meta">
                                            <time class="time">
                                                <i class="el-icon-time"></i> {{ whichTime(data.editTime) }}
                                            </time>
                                            <el-button type="text" class="read-more">
                                                查看详情 <i class="el-icon-right"></i>
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                                
                                <el-empty 
                                    v-if="!tabnews[item.name] || tabnews[item.name].length === 0" 
                                    description="暂无相关业务" 
                                />
                            </el-col>
                            
                            <!-- 右侧时间线 -->
                            <el-col :xs="24" :md="6" class="timeline-container">
                                <h3 class="timeline-title">最新发布</h3>
                                <el-timeline>
                                    <el-timeline-item 
                                        v-for="(data, index) in tabnews[item.name]" 
                                        :key="index"
                                        :timestamp="whichTime(data.editTime)"
                                        :type="index === 0 ? 'primary' : ''"
                                        @click="handleChangepage(data._id)"
                                    >
                                        <div class="timeline-content">{{ data.title }}</div>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </section>
        </div>
        
        <!-- 回到顶部按钮 -->
        <el-backtop :visibility-height="100" />
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted, computed } from 'vue';
import moment from 'moment';
import axios from 'axios';
import _ from 'lodash';
import { useRouter } from 'vue-router';
import PageHeader from '@/components/PageHeader.vue';

moment.locale("zh-cn");
const searchText = ref("");
const visible = ref(false);
const newlist = ref([]);
const loading = ref(true);
const isFallback = ref(false);
const errorMessage = ref('');

const whichTab = ref(1);

// 降级数据 - 当API请求失败时使用
const fallbackBoxes = [
    {
        _id: 'fallback1',
        title: '企业信息化解决方案',
        content: '为企业提供全方位的信息化解决方案，包括ERP系统实施、企业内部网络建设、信息安全保障等服务，助力企业数字化转型。',
        category: 1,
        cover: '',
        editTime: new Date().toISOString()
    },
    {
        _id: 'fallback2',
        title: '软件定制开发服务',
        content: '根据企业特定需求，提供专业的软件定制开发服务，涵盖需求分析、架构设计、编码实现、测试部署等全流程，打造专属的软件系统。',
        category: 1,
        cover: '',
        editTime: new Date().toISOString()
    },
    {
        _id: 'fallback3',
        title: '人工智能应用开发',
        content: '利用人工智能、机器学习、深度学习等技术，为企业开发智能化应用系统，如客服机器人、智能辅助决策系统、预测分析工具等。',
        category: 2,
        cover: '',
        editTime: new Date().toISOString()
    },
    {
        _id: 'fallback4',
        title: '大数据分析与处理',
        content: '提供大数据采集、存储、处理、分析与应用的一站式服务，帮助企业从海量数据中挖掘有价值的信息，支持业务决策。',
        category: 2,
        cover: '',
        editTime: new Date().toISOString()
    },
    {
        _id: 'fallback5',
        title: '云平台构建与迁移',
        content: '提供公有云、私有云、混合云等多种云计算解决方案，帮助企业构建弹性、安全、高效的IT基础设施，同时提供应用上云迁移服务。',
        category: 3,
        cover: '',
        editTime: new Date().toISOString()
    },
    {
        _id: 'fallback6',
        title: '网络安全解决方案',
        content: '为企业提供全方位的网络安全防护，包括安全架构设计、安全设备部署、安全策略制定、安全事件响应等服务，保障企业信息安全。',
        category: 3,
        cover: '',
        editTime: new Date().toISOString()
    }
];

// 分类数据
const categoryMap = {
    1: '企业服务',
    2: '技术创新',
    3: '数字基础设施'
};

onMounted(async () => {
    try {
        loading.value = true;
        const res = await axios.get("/webapi/boxs/list");
        newlist.value = res.data.data;
        
        // 检查是否使用了降级数据
        if (res.data.isUsingFallback) {
            isFallback.value = true;
            errorMessage.value = res.data.message || '服务器暂时不可用，显示备用数据';
            // 如果API返回空数据，使用降级数据
            if (newlist.value.length === 0) {
                newlist.value = fallbackBoxes;
            }
        }
    } catch (error) {
        console.error('获取业务列表失败:', error);
        isFallback.value = true;
        errorMessage.value = '无法连接到服务器，显示备用数据';
        newlist.value = fallbackBoxes;
    } finally {
        loading.value = false;
    }
});

const searchnewslist = computed(() => 
    searchText.value ? newlist.value.filter(item => 
        item.title.toLowerCase().includes(searchText.value.toLowerCase())
    ) : []
);

const topNewsList = computed(() => newlist.value.slice(0, 4));

const whichTime = time => {
    return moment(time).format("lll");
};

// 获取内容摘要
const getSummary = (content, length = 100) => {
    if (!content) return '暂无简介';
    
    // 移除HTML标签
    const plainText = content.replace(/<[^>]+>/g, '');
    
    if (plainText.length <= length) return plainText;
    return plainText.substring(0, length) + '...';
};

// 获取分类名称
const getCategoryName = (categoryId) => {
    return categoryMap[categoryId] || '其他业务';
};

// 业务分类列表
const tablist = [
    { name: '1', label: '企业服务' },
    { name: '2', label: '技术创新' },
    { name: '3', label: '数字基础设施' }
];

// 按分类组织的业务数据
const tabnews = computed(() => {
    const result = {};
    tablist.forEach(tab => {
        result[tab.name] = newlist.value.filter(item => 
            String(item.category) === tab.name
        );
    });
    return result;
});

// 点击事件
const router = useRouter();
const handleChangepage = (id) => {
    router.push(`/boxs/${id}`);
};
</script>

<style lang="scss" scoped>
.boxs-page {
    .boxs-banner {
        height: 500px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            width: 90%;
            max-width: 800px;
            
            h2 {
                font-size: 36px;
                font-weight: 700;
                margin-bottom: 15px;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            
            p {
                font-size: 18px;
                margin-bottom: 30px;
                opacity: 0.9;
            }
            
            .search-container {
                width: 100%;
                
                .search-input {
                    width: 100%;
                    
                    :deep(.el-input__inner) {
                        height: 50px;
                        border-radius: 25px;
                        padding-left: 20px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    
    .search-results {
        max-height: 400px;
        overflow-y: auto;
        
        .search-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s;
            
            &:last-child {
                border-bottom: none;
            }
            
            &:hover {
                background-color: #f5f7fa;
                
                .item-title {
                    color: #409EFF;
                }
            }
            
            .item-title {
                font-size: 16px;
                font-weight: 500;
                color: #333;
                margin-bottom: 5px;
                transition: color 0.3s;
            }
            
            .item-meta {
                font-size: 12px;
                color: #909399;
            }
        }
    }
    
    .featured-section {
        margin-bottom: 60px;
        
        .featured-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            height: 100%;
            cursor: pointer;
            transition: transform 0.3s;
            
            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                
                .card-image {
                    img {
                        transform: scale(1.05);
                    }
                }
            }
            
            .card-image {
                height: 200px;
                background-size: cover;
                background-position: center;
                position: relative;
                
                .card-category {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #fff;
                    padding: 4px 10px;
                    border-radius: 4px;
                    font-size: 12px;
                }
            }
            
            .card-content {
                padding: 20px;
                
                .card-title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                    margin-top: 0;
                    margin-bottom: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    line-height: 1.4;
                }
                
                .card-meta {
                    color: #909399;
                    font-size: 12px;
                    
                    .time {
                        display: flex;
                        align-items: center;
                        
                        i {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
    
    .categories-section {
        margin-bottom: 60px;
        
        .category-tabs {
            margin-top: 30px;
            
            :deep(.el-tabs__header) {
                margin-bottom: 30px;
            }
            
            :deep(.el-tabs__nav-wrap::after) {
                height: 1px;
            }
            
            :deep(.el-tabs__active-bar) {
                height: 3px;
            }
            
            :deep(.el-tabs__item) {
                font-size: 16px;
                font-weight: 500;
                padding: 0 20px 20px;
            }
            
            :deep(.el-tabs__item.is-active) {
                color: #409EFF;
            }
        }
        
        .category-list {
            .category-item {
                background-color: #fff;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                margin-bottom: 20px;
                display: flex;
                cursor: pointer;
                transition: transform 0.3s;
                
                @media (max-width: 768px) {
                    flex-direction: column;
                }
                
                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                    
                    .item-title {
                        color: #409EFF;
                    }
                }
                
                .item-image {
                    flex: 0 0 200px;
                    background-size: cover;
                    background-position: center;
                    
                    @media (max-width: 768px) {
                        height: 200px;
                        flex: none;
                    }
                }
                
                .item-content {
                    flex: 1;
                    padding: 20px;
                    
                    .item-title {
                        font-size: 18px;
                        font-weight: 600;
                        color: #333;
                        margin-top: 0;
                        margin-bottom: 10px;
                        transition: color 0.3s;
                    }
                    
                    .item-summary {
                        font-size: 14px;
                        color: #666;
                        line-height: 1.6;
                        margin-bottom: 15px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                    
                    .item-meta {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        
                        .time {
                            font-size: 12px;
                            color: #909399;
                            display: flex;
                            align-items: center;
                            
                            i {
                                margin-right: 5px;
                            }
                        }
                        
                        .read-more {
                            font-size: 14px;
                            color: #409EFF;
                            display: flex;
                            align-items: center;
                            
                            i {
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
        
        .timeline-container {
            .timeline-title {
                font-size: 18px;
                font-weight: 600;
                color: #333;
                margin-top: 0;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #eee;
            }
            
            :deep(.el-timeline-item) {
                cursor: pointer;
                
                .el-timeline-item__wrapper {
                    padding-bottom: 20px;
                }
                
                .el-timeline-item__timestamp {
                    font-size: 12px;
                    color: #909399;
                }
                
                .timeline-content {
                    font-size: 14px;
                    color: #333;
                    transition: color 0.3s;
                }
                
                &:hover .timeline-content {
                    color: #409EFF;
                }
            }
        }
    }
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
    
    .section-title {
        font-size: 28px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
        
        &::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: #409EFF;
        }
    }
    
    .section-desc {
        font-size: 16px;
        color: #666;
        max-width: 700px;
        margin: 20px auto 0;
    }
}

.page-container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}
</style>